---
title: Add a Stream Service
description: This demo displays a real-time data feed from a service published using the <a href="http://server.arcgis.com/en/geoevent-extension/latest/process-event-data/stream-services.htm">GeoEvent extension</a> for ArcGIS Server using a <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSocket</a>.  In addition to Esri Leaflet, it relies on <a href="https://github.com/rowanwins/esri-leaflet-stream">Esri Leaflet Stream.</a>
layout: example.hbs
---

<script src="https://unpkg.com/esri-leaflet-stream@1.0.0/dist/esri-leaflet-stream.min.js"></script>

<div id="map"></div>

<script type='text/javascript'>
  var map = L.map('map').setView([33.982735, -118.333152], 12);

  L.esri.basemapLayer('Gray').addTo(map);

  function createRandomFill(){
    return '#'+(Math.random()*0xFFFFFF<<0).toString(16);
  }

  var buses = L.esri.streamFeatureLayer({
    url: 'https://geoeventsample1.esri.com:6443/arcgis/rest/services/LABus/StreamServer',
    pointToLayer: function (geojson, latlng) {
      return L.circleMarker(latlng, {
        fillColor: createRandomFill(),
        fillOpacity: 0.8,
        color: "#cccccc",
        weight: 2
      });
    },
  }).addTo(map);

</script>
